<template>
  <div class="content">
    <a-page-header
        :style="{ background: 'var(--color-bg-2)' }"
        title="OJ 在线判题系统"
        subtitle="用户详细信息"
        :show-back="false"
    >
      <template #breadcrumb>
        <a-breadcrumb>
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>用户</a-breadcrumb-item>
          <a-breadcrumb-item>信息</a-breadcrumb-item>
        </a-breadcrumb>
      </template>
      <template #extra>
        <a-radio-group type="button" v-model="infoType">
          <a-radio value="info">基本信息</a-radio>
          <a-radio value="account">账号安全</a-radio>
        </a-radio-group>
      </template>
    </a-page-header>

    <a-card style="margin-top: 20px" >
      <a-list size="large" :bordered="false" v-if="infoType == 'info'">
        <a-list-item>
          <a-list-item-meta
              title="用户账号"
              description="账号是用户的唯一凭证，共12位，注册后无法修改"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-idcard />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ userAccount }}
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="用户名"
              description="建议使用自己的真实名字"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-user />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ userName }}
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="用户简介"
              description="简单介绍你自己"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-file />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ userProfile }}
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="用户权限"
              description="这里是你的权限，如果你是用户，那么能操作的很少"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-safe />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-tag v-if="userRole === 'user'" color="green" bordered>用户</a-tag>
            <a-tag v-else color="orangered" bordered>管理员</a-tag>
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="创建时间"
              description="记录你第一次注册的时间，同样不能修改"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-history />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ dateFormat('YYYY-mm-dd HH:MM:SS',createTime) }}
          </template>
        </a-list-item>
      </a-list>
      <a-list size="large" :bordered="false" v-else>
        <a-list-item>
          <a-list-item-meta
              title="用户唯一id"
              description="他可能在你遇到困难时帮助你"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-attachment />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ id }}
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="用户密码"
              description="密码不会展示在这里，你可以点击重置密码"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-lock />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            <a-button status="danger">重置密码</a-button>
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="经验值"
              description="练习与参加比赛都会获得经验值"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-fire />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ userExp }}
          </template>
        </a-list-item>
        <a-list-item>
          <a-list-item-meta
              title="邮箱"
              description="这里是你的邮箱，不允许更改"
          >
            <template #avatar>
              <a-button shape="circle" >
                <icon-email />
              </a-button>
            </template>
          </a-list-item-meta>
          <template #actions>
            {{ email }}
          </template>
        </a-list-item>
      </a-list>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import useUserInfoStore from "../store/user.ts";
import {ref} from "vue";

const user = useUserInfoStore()

const {userAccount, userName , userRole, userProfile, createTime, userExp, id, email} = user.userInfo
const infoType = ref("info")

const dateFormat = (fmt, date) => {
  let ret:string= "";
  date= new Date(date);
  const opt = {
    'Y+': date.getFullYear().toString(), // 年
    'm+': (date.getMonth() + 1).toString(), // 月
    'd+': date.getDate().toString(), // 日
    'H+': date.getHours().toString(), // 时
    'M+': date.getMinutes().toString(), // 分
    'S+': date.getSeconds().toString() // 秒
    // 有其他格式化字符需求可以继续添加，必须转化成字符串
  }
  for (let k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt)
    if (ret) {
      fmt = fmt.replace(
          ret[1],
          ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
      )
    }
  }
  return fmt
}
</script>


<style scoped>
.content {
  padding: 20px;
  width: 80%;
  margin: 0 auto;
}
</style>
